import React from 'react';
import ReactDOM from 'react-dom';

import { createHashHistory } from 'History';

import { Router, Route, useRouterHistory } from 'react-router';

import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';

import { Provider } from 'mobx-react';

import { WeaDebugRouteMenu } from 'ecCom';

WeaDebugRouteMenu.defaultProps.showRouteLev = 3;

import Module from './index';

const routing = new RouterStore();

const allStore = {
  routing,
  ...Module.store,
};

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

const history = syncHistoryWithStore(browserHistory, allStore.routing);

const Home = props => props.children;

const Root = () => (
  <Provider
    ecId={`${(this && this.props && this.props.ecId) || ''}_Provider@b5fmmg`}
    {...allStore}
  >
    <Router
      ecId={`${(this && this.props && this.props.ecId) || ''}_Router@tt07as`}
      history={history}
    >
      <Route
        ecId={`${(this && this.props && this.props.ecId) || ''}_Route@o0awbd`}
        name="root"
        breadcrumbName="根路由"
        path="/"
        component={WeaDebugRouteMenu}
      >
        <Route
          ecId={`${(this && this.props && this.props.ecId) || ''}_Route@g6u0wt`}
          name="main"
          breadcrumbName="入口"
          path="main"
          component={Home}
        >
          {Module.Route}
        </Route>
      </Route>
    </Router>
  </Provider>
);

ReactDOM.render(
  <Root
    ecId={`${(this && this.props && this.props.ecId) || ''}_Root@dry60r`}
  />,
  document.getElementById('container'),
);
